---
type: tutorial
title: Create a social media footer
description: |-
  Tutorial: Build your first Astro blog —
  Build a new component from scratch, then add it to your pages
i18nReady: true
---
import Checklist from '~/components/Checklist.astro';
import Box from '~/components/tutorial/Box.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';


<PreCheck>
  - Create a Footer component
  - Create and pass props to a Social Media component
</PreCheck>

Now that you have used Astro components on a page, it's time to use a component within another component!

## Create a Footer Component
<Steps>
1. Create a new file at the location `src/components/Footer.astro`.

2. Copy the following code into your new file, `Footer.astro`.

    ```astro title="src/components/Footer.astro"
    ---
    const platform = "github";
    const username = "withastro";
    ---

    <footer>
      <p>Learn more about my projects on <a href={`https://www.${platform}.com/${username}`}>{platform}</a>!</p>
    </footer>
    ```
</Steps>

### Import and use `Footer.astro`

<Steps>
1. Add the following import statement to the frontmatter in each of your three Astro pages (`index.astro`, `about.astro`, and `blog.astro`):

    ```js
    import Footer from '../components/Footer.astro';
    ```

2. Add a new `<Footer />` component in your Astro template on each page, just before the closing `</body>` tag to display your footer at the bottom of the page. 

    ```astro ins={1}
        <Footer />
      </body>
    </html>
    ```

3. In your browser preview, check that you can see your new footer text on each page.
</Steps>

<Box icon="puzzle-piece">

## Try it yourself - Personalize your footer

Customize your footer to display multiple social networks (e.g. Instagram, Twitter, LinkedIn) and include your username to link directly to your own profile.

</Box>

### Code Check-In
If you've been following along with each step in the tutorial, your `index.astro` file should look like this:

```astro title="src/pages/index.astro"
---
import Navigation from '../components/Navigation.astro';
import Footer from '../components/Footer.astro';
import '../styles/global.css';

const pageTitle = 'Home Page';
---

<html lang="en">
	<head>
		<meta charset="utf-8" />
		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
		<meta name="viewport" content="width=device-width" />
		<meta name="generator" content={Astro.generator} />
		<title>{pageTitle}</title>
	</head>
	<body>
    <Navigation />
		<h1>{pageTitle}</h1>
		<Footer />
	</body>
</html>
```

## Create a Social Media component

Since you might have multiple online accounts you can link to, you can make a single, reusable component and display it multiple times. Each time, you will pass it different properties (`props`) to use: the online platform and your username there.

<Steps>
1. Create a new file at the location `src/components/Social.astro`.

2. Copy the following code into your new file, `Social.astro`.

    ```astro title="src/components/Social.astro"
    ---
    const { platform, username } = Astro.props;
    ---
    <a href={`https://www.${platform}.com/${username}`}>{platform}</a>
    ```
</Steps>

### Import and use `Social.astro` in your Footer

<Steps>
1. Change the code in `src/components/Footer.astro` to import, then use this new component three times, passing different **component attributes** as props each time:

    ```astro title="src/components/Footer.astro" del={2,3,8} ins={4,9-11}
    ---
    const platform = "github";
    const username = "withastro";
    import Social from './Social.astro';
    ---

    <footer>
      <p>Learn more about my projects on <a href={`https://www.${platform}.com/${username}`}>{platform}</a>!</p>
      <Social platform="twitter" username="astrodotbuild" />
      <Social platform="github" username="withastro" />
      <Social platform="youtube" username="astrodotbuild" />
    </footer>
    ```

2. Check your browser preview, and you should see your new footer displaying links to these three platforms on each page.
</Steps>

## Style your Social Media Component

<Steps>
1. Customize the appearance of your links by adding a `<style>` tag to `src/components/Social.astro`.

    ```astro title="src/components/Social.astro" ins={6-17} 'class="social-platform'
    ---
    const { platform, username } = Astro.props;
    ---
    <a href={`https://www.${platform}.com/${username}`}>{platform}</a>

    <style>
      a {
        padding: 0.5rem 1rem;
        color: white;
        background-color: #4c1d95;
        text-decoration: none;
      }
    </style>
    ```

2. Add a `<style>` tag to `src/components/Footer.astro` to improve the layout of its contents.

    ```astro title="src/components/Footer.astro" ins={4-10}
    ---
    import Social from './Social.astro';
    ---
    <style>
      footer {
        display: flex;
        gap: 1rem;
        margin-top: 2rem;
      }
    </style>

    <footer>
      <Social platform="twitter" username="astrodotbuild" />
      <Social platform="github" username="withastro" />
      <Social platform="youtube" username="astrodotbuild" />
    </footer>
    ```

3. Check your browser preview again and confirm that each page shows an updated footer.
</Steps>

<Box icon="question-mark">

### Test Yourself

1. What line of code do you need to write in an Astro component's frontmatter to receive values of `title`, `author`, and `date` as props?

    <MultipleChoice>
      <Option isCorrect>
        `const { title, author, date } = Astro.props;`
      </Option>
      <Option>
        `import BlogPost from '../components/BlogPost.astro'`
      </Option>
      <Option>
        `<BlogPost title="My First Post" author="Dan" date="12 Aug 2022" />`
      </Option>
    </MultipleChoice>
    

2. How do you **pass values as props** to an Astro component?
    <MultipleChoice>
      <Option>
        `const { title, author, date } = Astro.props;`
      </Option>
      <Option>
        `import BlogPost from '../components/BlogPost.astro'`
      </Option>
      <Option isCorrect>
        `<BlogPost title="My First Post" author="Dan" date="12 Aug 2022" />`
      </Option>
    </MultipleChoice>
</Box>



<Box icon="check-list">

## Checklist

<Checklist>
- [ ] I can create new `.astro` components in `src/components/`
- [ ] I can import and use Astro components inside other Astro components.
- [ ] I can pass props to an Astro component.
</Checklist>
</Box>

### Resources

- [Component Props in Astro](/en/basics/astro-components/#component-props)
